<template>

  <div class="index">
    <div class="top clearfix">
      <img class="left top-logo" src="http://img4.65.com/web/weixin/logo.png">
      <div class="right">
        <img v-show="isLogin" src="http://img4.65.com/web/weixin/top-user.png" @click="getLoginBox" >
        <div v-show="!isLogin"><span>{{username}}</span><a href="javascript:;" @click="loginOut"  >【注销】</a></div>
      </div>
    </div>
  <div class="slide">
    <div class="swiper-container" id="index-slide">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="slide in sideList">
          <a :href="slide.type_plat_des || 'javascript:;'" title=""><img :src="slide.type_imgurl"></a>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination" id="top-pagination">
      </div>
    </div>
  </div>
  <div class="gift">
    <div class="search">
      <input type="text" class="search-input" placeholder="搜礼包" v-model="gameName" />
      <button class="search-btn" v-on:click="search"></button>
    </div>
    <h1 class="h-title">热门礼包</h1>
    <ul class="list">
      <li class="clearfix" v-for="gift in giftList">
        <img v-bind:src="gift.game_pic">
        <div class="list-text">
          <h2 class="an ios">{{gift.game_name}}<i class="i-an" v-if="gift.card_gtype=='android'"></i><i class="i-ios" v-else="gift.card_gtype=='ios'"></i><i class="i-iosyy" v-else="gift.card_gtype=='iosyy'"></i></h2>
          <p class="gift-name">{{gift.type_name}}</p>
          <div class="progress-wrap">剩余：
            <div class="progress-box">
              <div class="progress" v-bind:style="{width:Math.floor((gift.total_used/gift.total_card)*100)+'%'}"></div>
            </div><span class="progress-status">{{Math.floor((gift.total_used/gift.total_card)*100)}}%</span></div>
        </div>
        <button v-if="gift.total_used!=gift.total_card"  class="gift-btn" v-on:click="getGiftDetail(gift.type_id)">领取</button>
        <button v-else  class="gift-btn" >领取</button>
      </li>
      <li><a href="javascript:;" class="load" v-on:click="load">{{loadText}}</a></li>
    </ul>
  </div>
    <!--登录-->
    <div class="main login login-reg-main" v-show="loginShow">
      <div class="main-content">
        <a href="javascript:;" class="close" v-on:click="close" ></a>
        <div class="logo"></div>
        <form>
          <div class="input-row">
            <div>
              <span class="user-icon "></span>
              <input type="text" placeholder="请输入帐号"  name="user_name"  v-model="loginUserName" />
            </div>
          </div>
          <div class="input-row">
            <div>
              <span class="pw-icon"></span>
              <input type="password" placeholder="请输入密码" name="password" v-model="loginPassword" />
            </div>
          </div>
          <div class="input-row" v-show="codeShow">
            <div class="clearfixed">
              <p class="code left">
                <span class="code-icon"></span>
                <input type="text" placeholder="验证码" v-model="code" />
              </p>
              <p class="left"><img title="点击换一张"  :src="codeSrc"  alt="验证码" /></p>
            </div>
          </div>
        </form>
        <a href="javascript:;" class="btn"  v-on:click="login">{{loginText}}</a>
        <div class="reg-tip">还没有65游戏帐号？<a href="javascript:;" v-on:click="reg" >马上注册</a></div>
        <p class="login-status">{{loginStatus}}</p>
      </div>
    </div>

    <!-- 注册-->
    <div class="main register login-reg-main" v-show="regShow">
      <div class="main-content">
        <a href="javascript:;" class="close" v-on:click="close"  ></a>
        <div class="logo"></div>
        <form>
          <div class="input-row">
            <div>
              <span class="user-icon "></span>
              <input type="text" placeholder="请输入帐号"  name="user_name"  v-model="regUserName" v-on:blur="dealFocus"/>
            </div>
          </div>
          <div class="input-row">
            <div>
              <span class="pw-icon"></span>
              <input type="password" placeholder="请输入密码" name="password" v-model="regPassword" v-on:blur="dealBlur" />
            </div>
          </div>
          <div class="input-row">
            <div>
              <span class="pw-r-icon"></span>
              <input type="password" placeholder="请再次输入密码" name="re_pass" v-model="regRPassword" v-on:blur="dealBlur" />
            </div>
          </div>
        </form>
        <a href="javascript:;" class="btn" v-on:click="regBtn" >{{loginText}}</a>
        <p class="status">{{regStatus}}</p>
      </div>
    </div>
    <div class="mask" v-show="maskShow"></div>
</div>

</template>
<script>
  import '../assets/css/swiper.min.css'
  import  Swiper from '../../static/js/swiper.min'
  import  encode from'../../static/js/encode'
  export  default {
    data(){
      return{
        giftList:[],
        sideList:[],
        page:1,
        gameName:'',
        total:'',
        username:'',
        loginUserName:'',
        loginPassword:'',
        code:'',
        loginStatus:'',
        regStatus:'',
        regUserName:'',
        regPassword:'',
        regRPassword:'',
        loadText:'点击加载更多',
        loginText:'登录',
        isLogin:true,
        codeSrc: "http://api.65.com/65user/code_gg.php",
        maskShow:false,
        loginShow:false,
        regShow:false,
        codeShow:false
      }
    },
    mounted:function () {
      this.getGiftList(this.page,this.gameName);
      this.getSide();
      this.checkLogin();
    },
    methods:{
        getGiftList:function (page,game_name) {
         this.$jsonp('http://api.65.com/65api/all_cast_list.php?action=card_list&page='+page+'&end=5&game_name='+game_name+'',null,(err,data)=>{
           if(data.total !=0){
             this.loadText ='点击加载更多';
              this.total =Math.ceil(data.total/5);
              for(var p in data.card_list){
                this.giftList.push(data.card_list[p]);
              }
           }else{
             this.loadText ='没有礼包了';
           }
          })
        },

      getSide:function () {
        this.$jsonp('http://api.65.com/65api/all_cast_list.php?action=carousel_pic',null,(err,data)=>{

          if(data.length>0){
            this.sideList = data;
            this.$nextTick(function () {
              this.initSwiper();
            })
          }

        })
      },
      initSwiper: function() {
        var slideSwiper = new Swiper('#index-slide ', {
          pagination: '.pagination', //使用分页
          direction: 'horizontal', //滑动的方向
          loop: true, //循环
          autoplay: 3000, //自动播放延时
          paginationClickable: true, //点击分页回到图片。
          grabCursor: true
        });
      },
    getGiftDetail:function(id) {
          if(this.isLogin==true){
            this.maskShow = true;
            this.loginShow = true;
          }else{
            this.$router.push({ path: '/detail?id='+id });
          }

      },
      load:function () {
          this.page++;
          if(this.page>this.total){
            this.loadText ='没有礼包了';
          }else{
              this.getGiftList(this.page,this.gameName)
          }
      } ,
      search:function () {
          this.page =1;
          this.giftList = [];
          this.getGiftList(this.page,this.gameName);
      },
      getLoginBox:function () {
          this.maskShow = true;
          this.loginShow = true;
      },
      loginOut:function () {
        this.$jsonp('http://api.65.com/65user/login_out.php',null,(err,data)=>{
           if(data.code=='1'){
             1 == data.code && this.checkLogin()
           }
        })
      },
      checkLogin:function () {
        this.$jsonp('http://api.65.com/65user/login_status.php',null,(err,data)=>{
          if(data.code=='1'){
            this.isLogin=false;
            this.username = data.data.UNAME;
          }else{
            this.isLogin=true;
          }
        })
      },
      login:function () {
       if(this.loginUser ==''){
         this.loginStatus='用户名不能为空';
         return;
       }
       if(this.loginPassword ==''){
         this.loginStatus='密码不能为空';
         return;
       }
       this.loginText ='登录中';
       this.$jsonp('http://api.65.com/65user/ajax_login.php?action=login_code&u='+this.loginUserName+'&p='+encode.encryptedString(this.loginPassword)+'&code='+this.code,null,(err,data)=>{
         if(data.res=='1'){
            this.isLogin =false;
            this.loginShow=false;
            this.maskShow = false;
            this.username = data.uinfo.user_name;
          }else if(data.res=='-3'){
           this.loginText ='登录';
           this.loginStatus = data.msg;
           if(data.loginnum>=5){
             this.codeShow =true;
             this.codeSrc=data.code;
           }else{
             this.loginText ='登录';
             this.loginStatus = data.msg;
           }
         }
        })
      },
      close:function () {
        this.maskShow = false;
        this.loginShow = false;
        this.regShow =false;
      },
      reg:function () {
        this.loginShow = false;
        this.regShow = true;
        this.loginText='注册'
      },
      dealFocus:function () {
        if(!/^([\da-zA-Z]){6,22}$/.test(this.regUserName)){
          return this.regStatus = '*用户名由6~22个字符组成，只允许数字或字母';
        }else{
          return this.regStatus ='';
        }
      },
      dealBlur:function () {
        if(!/^([\da-zA-Z]){6,22}$/.test(this.regPassword)||!/^([\da-zA-Z]){6,22}$/.test(this.regRPassword)){
          return this.regStatus = '*密码由6~22个字符组成，只允许数字或字母';
        }else if(this.regPassword!=this.regRPassword){
          return this.regStatus = '*两次密码不相同';
        }else{
           return this.regStatus ='';
        }
      },
      regBtn:function () {
        this.loginText='注册中'
        this.$jsonp("http://api.65.com/65reg/register.php?action=reg_asy&user_name=" + this.regUserName + "&password=" + this.regPassword + "&re_pass=" + this.regRPassword,null,(err,data)=>{
          if(data.code=='1'){
            this.regShow=false;
            this.maskShow = false;
            this.checkLogin();
          }else{
            this.regStatus=data.msg;
            this.loginText='注册'
          }
        })

      }
    }

  }
</script>


